<template>
  <el-container style="min-height: 500px; border: 1px solid #eee">
    <el-aside width="180" class="groups-aside">
      <div style="padding-left: 20px" class="common-title">
        权限分组
      </div>
      <div class="left-sider">
        <div
          v-for="item in groupList"
          :key="item.id"
          class="group-item"
          :class="{ 'is-active': activeGroup && activeGroup.id === item.id }"
          @click="handleGroupSelect(item)"
        >
          <span>{{ item.name }}</span>
          <span class="edit-btn">
            <i class="el-icon-edit " @click.stop="handleGroupEdit(item)" />
            <i class="el-icon-delete " @click.stop="handleGroupDelete(item)" />
          </span>
        </div>
        <div class="group-item-new">
          <el-button type="text" class="handleGroupAdd" @click="handleGroupAdd">添加新的分组</el-button>
        </div>
      </div>
    </el-aside>

    <el-container class="perm-container">
      <el-header style="height: auto">
        <div class="common-title">
          当前分组: <span v-if="activeGroup !== null">{{ activeGroup.name }}</span>
        </div>
        <div class="search-container">
          <!--          <                    el-input v-model="keyword" class="search-wrap" />-->
          <!--                    <          el-button type="primary" icon="search" @click="fetchPermList">搜索</el-button>-->
          <el-button type="primary" icon="add" class="addBtn" @click="handlePermAdd">添加权限</el-button>
        </div>
      </el-header>
      <el-main style="padding-top: 20px">
        <el-table :data="list" border>
          <el-table-column prop="name" align="center" label="权限名称" />
          <el-table-column prop="description" align="center" label="权限描述" />
          <el-table-column prop="remark" align="center" label="备注" />
          <el-table-column align="center" label="操作" width="150">
            <template slot-scope="scope">
              <el-button size="small" type="primary" class="editBtn" @click="handlePermEdit(scope.row)">编辑</el-button>
              <el-button size="small" type="danger" @click="handlePermDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>

        </el-table>
        <div style="margin-top: 10px " class="pagination-container">
          <el-pagination
            :current-page.sync="pageNum"
            :page-size="pageSize"
            :total="total"
            layout="total, prev, pager, next"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>

      </el-main>
      <group-form-dialog ref="groupFormDialog" :scope="scope" />
      <perm-form-dialog ref="permFormDialog" :scope="scope" />
    </el-container>
  </el-container>
</template>

<script>
import {
  getGroupList,
  deleteGroup,
  queryGroupPermList,
  deleteGroupPerm
} from '@/api/perm'
import PermFormDialog from './PermFormDialog'
import GroupFormDialog from './GroupFormDialog'

export default {
  name: 'PermissionMange',
  components: {
    GroupFormDialog,
    PermFormDialog
  },
  props: {
    scope: {
      type: Number,
      require: true
    }
  },
  data() {
    return {
      activeGroup: null,
      pageSize: 10,
      pageNum: 1,
      keyword: '',
      total: 0,
      groupList: [],
      list: []
    }
  },
  computed: {},
  mounted() {
    this.fetchGroupList()
  },
  methods: {
    fetchGroupList() {
      return getGroupList(this.scope).then((res) => {
        if (res.code === 0) {
          this.groupList = res.data
          this.$nextTick(() => {
            this.updateActiveGroup()
          })
        }
      })
    },
    fetchPermList() {
      if (this.activeGroup == null) {
        this.list = []
        this.total = 0
        this.pageNum = 1
        this.pageSize = 10
      } else {
        const data = {
          groupId: this.activeGroup.id,
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          name: this.keyword
        }
        return queryGroupPermList(this.scope, data).then(res => {
          if (res.code === 0) {
            this.list = res.data.list
            this.total = res.data.total
          }
          return res
        })
      }
    },
    updateActiveGroup() {
      if (this.groupList.length > 0) {
        if (this.activeGroup == null) {
          this.activeGroup = this.groupList[0]
          this.fetchPermList()
        }
      } else {
        this.activeGroup = null
      }
    },
    handleGroupSelect(group) {
      if (group.id === this.activeGroup.id) {
        this.fetchPermList()
      } else {
        this.activeGroup = group
        this.pageNum = 1
        this.total = 0
        this.fetchPermList()
      }
    },
    handleGroupAdd() {
      this.$refs.groupFormDialog.add().then(() => {
        this.fetchGroupList()
      })
    },
    handleGroupEdit(group) {
      this.$refs.groupFormDialog.edit(group).then(() => {
        this.fetchGroupList()
      })
    },
    handleGroupDelete(group) {
      this.$confirm(`此操作将删除【${group.name}】, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteGroup(this.scope, group.id).then((res) => {
          if (res.code === 0) {
            this.$notify({ title: '成功', message: '删除成功', type: 'success', duration: 2000 })
            if (group.id === this.activeGroup.id) {
              this.activeGroup = null
            }
            this.fetchGroupList()
          }
        })
      })
    },

    handlePermAdd() {
      if (!this.groupList || this.groupList.length === 0) {
        this.$notify({ title: '提示', message: '请先添加分组', type: 'warn', duration: 2000 })
        return
      }
      this.$refs.permFormDialog.add(this.activeGroup.id, this.groupList).then(() => {
        this.fetchPermList()
      })
    },

    handlePermEdit(perm) {
      this.$refs.permFormDialog.edit(perm, this.groupList).then(() => {
        this.fetchPermList()
      })
    },
    handlePermDelete(perm) {
      this.$confirm(`此操作将删除权限【${perm.name}】, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteGroupPerm(this.scope, perm.id).then((res) => {
          if (res.code === 0) {
            this.$notify({ title: '成功', message: '删除成功', type: 'success', duration: 2000 })
            this.fetchPermList()
          }
        })
      })
    },
    handleSizeChange() {

    },
    handleCurrentChange() {
      this.fetchPermList()
    }

  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .left-sider {
    margin-top: 10px;
  }

  .common-title {
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 16px;
    font-weight: bold;
    color: #666;
    border-bottom: 1px solid #e7e7e7;
  }

  .groups-aside {
    background-color: #fff;
    margin-right: 14px;
    width: 350px;
    max-height: calc(100vh - 130px);
    overflow: auto;
  }

  .perm-container {
    background-color: #ffffff;
	.editBtn{
		background-color: $btnBgc;
		border: none;
	}
	.editBtn:hover{
		opacity: 0.5;
	}
  }

  .search-container {
    margin-top: 10x;

	.addBtn{
		background-color: $btnBgc;
		border: none;
	}
	.addBtn:hover{
		opacity: 0.5;
	}
  }
  .handleGroupAdd{
	  color: $btnBgc;
  }
  .handleGroupAdd:hover{
	  color: $btnBgc;
	  background-color: white;
	  border-color: white;
  }
  .search-wrap {
    width: 200px;
    margin-right: 30px
  }

  .group-item {
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    color: #303133;
    padding: 0 20px;
    list-style: none;
    cursor: pointer;
    position: relative;
    -webkit-transition: border-color .3s, background-color .3s, color .3s;
    transition: border-color .3s, background-color .3s, color .3s;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    white-space: nowrap;
    display: flex;
    justify-content: space-between;
  }

  .group-item-new {
    margin-top: 5px;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    color: $btnBgc;
    padding: 0 20px;
  }

  .group-item.is-active {
    color: $btnBgc;
  }

  .group-item:hover {
    outline: 0;
    background-color: #edf3fe;
  }

  .group-item:hover .edit-btn {
    display: block;
  }

  .edit-btn {
    display: none;

    .el-icon-delete {
      margin-right: 5px;
      width: 24px;
      text-align: center;
      font-size: 18px;
      vertical-align: middle;
      color: #ed4014 !important;

    }

    .el-icon-edit {
      margin-right: 5px;
      width: 24px;
      text-align: center;
      font-size: 18px;
      vertical-align: middle;
      color: #4d82f3 !important;
    }
  }
</style>
